<template>
    <div id="app">
        <div v-for="(box, index) in boxes" :key="index" class="container" :style="{
            backgroundColor: getColor(index)
        }" @mousedown="startDrag(index, $event)">
            <div class="box-header">
                <pubtitle v-if="index === 0" title="两卡打击" :url="img1" />
                <pubtitle v-else-if="index === 1" title="两卡治理" :url="img2" />
                <pubtitle v-else title="预警劝阻" :url="img3" />
            </div>
            <div class="componentsbox">
                   <twoCardGovernance  />
                <!-- 两卡打击 -->
                <!-- <twoCardStrike v-if="props.type === 'twoCardStrike'" /> -->
                <!-- 两卡治理 -->
                <!-- <twoCardGovernance v-else-if="props.type === 'twoCardGovernance'" /> -->
                <!-- 预警劝阻 -->
                <!-- <earlyWarning v-else /> -->
            </div>
        </div>

    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import pubtitle from './components/pubtitle.vue';
import twoCardGovernance from './twoCardGovernance.vue';
import earlyWarning from './earlyWarning.vue';
import twoCardStrike from './twoCardStrike.vue';
import img1 from './assets/容器 21216@2x(1).png';
import img2 from './assets/容器 21216@2x.png';
import img3 from './assets/容器 21217@2x.png';

const props = defineProps({
    type: {
        type: String,
        default: "",
    },
});

// 初始化盒子数据，每个div有不同的初始尺寸作为最小尺寸
const boxes = ref([
    {
        x: 0, y: 10,
        width: 458, height: 810,
        minWidth: 350, minHeight: 630,
        active: false
    }
]);

// ,
//   {
//         x: 468, y: 10,
//         width: 458, height: 400,
//         minWidth: 400, minHeight: 350,
//         active: false
//     },
//     {
//         x: 468, y: 420,
//         width: 458, height: 400,
//         minWidth: 400, minHeight: 350,
//         active: false
//     }


const getColor = (index) => {
    let temp;
    switch (index) {
        case 0:
            temp = 'rgba(13,52,173,0.4)';
            break;
        case 1:
            temp = 'rgba(6,129,129,0.4)';

            break;
        case 2:
            temp = 'rgba(168,90,13,0.4)';
            break;
    }
    return temp
}


</script>

<style scoped lang="scss">
.container {
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: space-between;
    align-content: space-between;
    flex-direction: column;

    .componentsbox {
        box-sizing: border-box;
        height: calc(100% - 50px);
        padding: 10px;
    }
}

.box-header {
    box-sizing: border-box;
    height: 50px;
    padding: 5px 10px;
    cursor: move;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    background: rgba(0, 0, 0, 0.4);
}

.box-content {
    flex: 1;
    padding: 10px;
}
</style>